<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;">
            	选择时间段：
        		<input id="start_time" class="mini-monthpicker" format="yyyy-MM" tooltip="请选择开始日期" showClose="true" oncloseclick="clearT" allowInput="false" style="width:100px;"/>
        		&nbsp;—&nbsp;
        		<input id="end_time" class="mini-monthpicker" format="yyyy-MM" tooltip="请选择截止日期" showClose="true" oncloseclick="clearT" allowInput="false" style="width:100px;"/>
            	<a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
            </td>
        </tr>
    </table>
</div>
<div class="mini-fit" >
<div id="container5" style="min-width: 310px; height: 100%;width: 100%;"></div>
</div>

<script type="text/javascript">
mini.parse();
var startTime = mini.get("start_time");
var endTime = mini.get("end_time");
var myDate = new Date();
var sm = myDate.getFullYear() + '-'+myDate.getMonth()+"";
var em = myDate.getFullYear() + '-'+ (myDate.getMonth()+1+"");
startTime.setValue(sm);
endTime.setValue(em);
var categories = [];
var data = [];
var options = {
		chart: {
	        type: 'column'
	    },
	    title: {
	        text: '购药类别统计地区统计图'
	    },
	    xAxis: {
	    },
	    yAxis: {
	        min: 0,
	        allowDecimals: false,
	        title: {
	            text: '人数'
	        }
	    },
	    plotOptions: {
	        column: {
	            pointPadding: 0.2,
	            borderWidth: 0
	        }
	    },
	    series:[
	    {
	        name: '区域人数'
	    }],
	    credits:{
	    	text:"",
	        href:"javascript:void(0);"
	    }
};
$(document).ready(function(){
	view();
});
function search(){
	view();
}
function view(){
	var chart = $('#container5').highcharts(options);
	$.post("medicine_type_area_view.do", {startTime: startTime.getFormValue(), endTime: endTime.getFormValue()}, function(info){
		categories = [];data = [];
		$.each(info,function(i,d){
			categories.push([i]);
       		data.push([d]);
        });
   		chart = new Highcharts.Chart(options);
   		chart.series[0].setData(data);
   		chart.xAxis[0].setCategories(categories);
	},"json");
}
function clearT(e){
	e.sender.setValue("");	
}
</script>
</body>
</html>